Элемент iframe (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы — WebReference
Задача
Сделать одностраничник, состоящий из фреймов, наподобие Dashboard на Codepen.
Результат должен быть примерно следующим:
Возможное решение
Разметка одной секции может выглядеть так:
<section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section>
Поскольку каждый блок имеет заголовок, мы может обернуть его в